<template>
  <div id="projectManagementt">
    <el-container>
      <el-header class="projectManagementtHeader">
        <h1>施工计划</h1>
        <div id="projectManagementtHeaderBtn">
          <router-link to="/inTellingSchedule">
            <i class="el-icon-s-home"></i
          ></router-link>
        </div>
      </el-header>
      <el-main class="projectManagementtMain">
        <el-menu
          :default-active="key"
          class="el-menu-vertical-projectManagement"
          @select="selectleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>项目概览</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-message"></i>
            <span slot="title">月计划</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">周计划</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-place"></i>
            <span slot="title">临时计划</span>
          </el-menu-item>
        </el-menu>
        <div class="projectManagementcontent">
          <overview class="constructionTable" :getKey="getKey" v-if="key == 1"></overview>
          <monthlyPlan
            class="constructionTable"
            :getKey="getKey"
            v-if="key == 2"
          ></monthlyPlan>
          <!-- 周计划 -->
          <weeklyPlan
            class="constructionTable"
            :getKey="getKey"
            v-if="key == 3"
          ></weeklyPlan>
          <tempPlan class="constructionTable" v-if="key == 4" :getKey="getKey"></tempPlan>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// // 周计划
import weeklyPlan from "../constructionPlan/weeklyPlan/weeklyPlan.vue";
// // 月计划
import monthlyPlan from "../constructionPlan/monthlyPlan/monthlyPlan.vue";
import tempPlan from "../constructionPlan/tempPlan/tempPlan.vue";

import overview from "../constructionPlan/overview/overview.vue";
export default {
  data() {
    return {
      key: "1",
      temporaryId: "",
      inTellingId: "",
    };
  },
  components: {
    weeklyPlan,
    monthlyPlan,
    tempPlan,
    overview,
    // plannedSalesPoints,
    // temporaryPlan,
  },
  created() {
    this.inTellingId = this.$store.state.inTellingId;
  },
  methods: {
    selectleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.key = key;
    },
    handleClose(key, keyPath) {
      this.key = key;
      console.log(key, keyPath);
    },
    getKey(key, id) {
      this.key = key;
      this.temporaryId = id;
    },
  },
};
</script>

<style lang="less" scoped>
#projectManagementt {
  height: 100%;
  display: flex;
  width: 100%;
  background-color: #eeeeee;
  :deep(.el-textarea__inner) {
    // pointer-events: none;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    resize: none;
  }
  .projectManagementtHeader {
    height: 3rem !important;
    position: relative;
    background-color: black;
    h1 {
      color: white;
      line-height: 45px;
    }
    #projectManagementtHeaderBtn {
      top: 15px;
      right: 1%;
      position: absolute;
      i {
        color: white;
        font-size: 25px;
      }
    }
  }
  .projectManagementtMain {
    display: flex;
    padding-top: 0;
    padding-left: 0;
    padding: 0;
    .projectManagementcontent {
      width: 88%;
      height: 100%;
      padding-top: 1rem;
      background-color: white;
    }
  }
  .formTable {
    background-color: #409eff;
    color: white;
  }
  .constructionTable {
    width: 100%;
  }
}
.el-menu-vertical-projectManagement {
  width: 12%;
  height: 100%;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less">
#projectManagementt {
  .formTable {
    background-color: #409eff !important;
    color: white;
  }
  th.el-table__cell {
    background-color: transparent;
  }
}
</style>
